<template>
  <div class="pre-calendar">
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      class="pre-plan-btn"
    >
      <div></div>
      <el-radio-group
        v-model="search.cj"
        size="small"
        class="pre-radio"
        @change="getPlan"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button
          v-for="(item, index) in cjOption"
          :key="index"
          :label="item['key_value']"
        ></el-radio-button>
      </el-radio-group>
      <el-row type="flex">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="addPlan"
          >新增计划</el-button
        >
        <el-button size="small">导出订单</el-button>
      </el-row>
    </el-row>
    <div class="remind" style="margin-bottom:5px">
      共<span>1910</span>吨客户订单，<span>600</span>吨常规生产
    </div>
    <full-calendar
      class="test-fc"
      :events="fcEvents"
      first-day="1"
      locale="zh-cn"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
    >
    </full-calendar>
  </div>
</template>
<script>
let demoEvents = [
  {
    title: 'R70/T30 40S 50S AA JMF166-2',
    type: '客定',
    quantity: '30',
    cj: '五纺',
    start: '2021-10-01',
    end: '2021-10-8',
    cssClass: ['common', 'blue']
  }
];
import { getPrePlan } from '@/api/productionPlan';
import moment from 'moment';
import fullCalendar from './Calendar/fullCalendar.vue';
export default {
  components: { fullCalendar },
  data() {
    return {
      // 通用
      search: {
        cj: '',
        query_time: moment()
          .startOf('month')
          .format('YYYY-MM'),
        size: -1
      },
      // 日历
      name: 'Sunny!',
      fcEvents: []
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    }
  },
  created() {
    this.getPlan(this.search);
  },
  methods: {
    async getPlan() {
      const { data } = await getPrePlan(this.search);
      data.dataList.map(item => {
        item.start = item.start_time;
        item.end = item.end_time;
        item.cssClass = ['common', 'blue'];
      });
      this.fcEvents = data.dataList;
    },
    addPlan() {
      this.$emit('openAddPlanDialog');
    },
    changeMonth(start, end, current) {
      console.log(
        'changeMonth',
        start.format(),
        end.format(),
        current.format()
      );
      this.search.query_time = current.format('YYYY-MM');
      this.getPlan();
    },
    eventClick(event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos);
    },
    dayClick(day, jsEvent) {
      console.log('dayClick', day, jsEvent);
    },
    moreClick(day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent);
    }
  }
};
</script>
<style lang="scss">
.app {
  color: green;
}
.pre-calendar {
  position: relative;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  .pre-plan-btn {
    height: 60px;
  }
}
</style>
